<template>
	<div class="app-container">
		<div v-if="!showLearnUserExam">
			<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
				<el-form-item label="试卷名称" prop="examName">
					<el-input v-model="queryParams.examName" placeholder="请输入试卷名称" clearable size="small" @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item label="答卷成绩" prop="examScore">
					<el-input v-model="queryParams.examScore" placeholder="请输入答卷成绩" clearable size="small" @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openUserExam" v-hasPermi="['business:learnUserExam:add']">开始考试</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:learnUserExam:export']">导出</el-button>
				</el-col>
				<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
			</el-row>

			<el-table v-loading="loading" :data="learnUserExamList">
				<el-table-column label="试卷名称" align="center" prop="examName" />
				<el-table-column label="答卷成绩" align="center" prop="examScore" />
				<el-table-column label="答卷时间" align="center" prop="createDate" width="180">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="setUserExam(scope.row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</div>

		<div class="exam-container" v-else>
			<div class="exam-content">
				<div class="answer-card">
					<el-scrollbar>
						<div class="answer-body">
							<div class="title">
								<div class="sign"></div>答题卡
							</div>
							<div class="item" v-if="radioLength > 0">
								<div class="item-type">
									单选题(共{{radioLength}}题，合计{{radioScore}}分)
								</div>
								<div class="item-num">
									<template v-for="(q,i) in learnExamQuestionList" v-if="q.questionType=='单选题'">
										<template v-if="null!=q.radio">
											<span v-if="q.iscorrect || 'undefined'==q.iscorrect || null ==q.iscorrect || isTest" :class="{'active':i==i}">
													{{i+1}}
											</span>
											<span v-else="!q.iscorrect" :class="{'is-error':i==i}">
													{{i+1}}
											</span>
										</template>
										<span v-else :class="{'active':i==-1}">
												{{i+1}}
										</span>
									</template>
								</div>
							</div>
							<div class="item" v-if="checkListLength > 0">
								<div class="item-type">
									多选题(共{{checkListLength}}题，合计{{checkListScore}}分)
								</div>
								<div class="item-num">
									<template v-for="(q,i) in learnExamQuestionList" v-if="q.questionType=='多选题'">
										<template v-if="q.check">
											<span v-if="q.iscorrect || 'undefined'==q.iscorrect || null ==q.iscorrect || isTest" :class="{'active':i==i}">
													{{i+1}}
											</span>
											<span v-else="!q.iscorrect" :class="{'is-error':i==i}">
													{{i+1}}
											</span>
										</template>
										<span v-else :class="{'active':i==-1}">
												{{i+1}}
												<!-- is-error -->
										</span>
									</template>
								</div>
							</div>
						</div>
					</el-scrollbar>
					<div class="footer">
						<div class="footer-body" v-if="isTest">
							<div class="tips">
								<i class="circle blue"></i>已答
							</div>
							<div class="tips">
								<i class="circle empty"></i>未答
							</div>
						</div>
						<div class="footer-body" v-if="!isTest">
							<div class="tips">
								<i class="circle blue"></i>正确
							</div>
							<div class="tips">
								<i class="circle danger"></i>错误
							</div>
						</div>
					</div>
				</div>
				<div class="question">
					<div class="question-total">
						{{learnUserExamForm.examName}} 共{{learnExamQuestionList.length}}题，合计{{learnUserExamForm.totalScore}}分
					</div>
					<div class="question-item" v-for="(q,i) in learnExamQuestionList">
						<div class="title">
							<span class="num">{{i+1}}. </span>{{q.questionContent}}({{q.questionScore}}分)
						</div>
						<!--题目-->
						<div style="display: inline-block;">
							<div v-if="q.questionType=='单选题'" v-for="(opts,index) in q.questionOptions" class="option">
								<el-radio v-model="q.radio" :label="opts.answer">{{opts.option}}</el-radio>
							</div>
							<div v-if="q.questionType=='多选题'" v-for="(opts,index) in q.questionOptions" class="option">
								<el-checkbox v-model="opts.checkList" @change="selectAnswer(i)" :label="opts.answer">{{opts.option}}</el-checkbox>
							</div>
						</div>
						<!--答案说明-->
						<div class="right-answer" v-if="!isTest">
							<div class="tips-row">考试答案：<span class="font-bule">{{q.userAnswer}}</span>
								<span class="answer-icon blue" v-if="q.iscorrect">正确</span>
								<span class="answer-icon danger" v-else>错误</span>
							</div>
							<div class="tips-row">正确答案：{{q.answer}}</div>
							<div class="tips-row">解释说明：{{q.questionRemark}}</div>
						</div>
						<div class="item-line"></div>
					</div>
				</div>
				<!--考试成绩-->
				<div class="right-content">
					<div class="achievement" v-if="!isTest">
						<ul>
							<li>
								<div class="label">考试姓名</div>
								<div class="value">{{username}}</div>
							</li>
							<li>
								<div class="label">考试成绩</div>
								<div class="value-num">{{learnUserExamForm.examScore}}</div>
							</li>
							<li>
								<div class="label">考试状态</div>
								<div class="value" v-if="learnUserExamForm.examScore>=learnUserExamForm.passScore">通过</div>
								<div class="unpass" v-else>不通过</div>
							</li>
						</ul>
					</div>
					<div class="operation">
						<el-button type="primary" class="operation-btn" v-if="isTest" @click="submitUserExam">提交</el-button>
						<el-button type="primary" class="operation-btn" v-if="!isTest" @click="exitUserExam">关闭</el-button>
					</div>
				</div>
			</div>
		</div>

		<el-dialog title="选择试卷名称" :visible.sync="open" width="400px" append-to-body>
			<el-select style="width:160px" v-model="learnUserExamForm.examId" clearable placeholder="请选择试卷名称">
				<el-option v-for="item in learnExamOptions" :key="item.id" :label="item.examName" :value="item.id"></el-option>
			</el-select>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="setUserExam(null)">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog title="" :visible.sync="achievementVisible" width="200px">
			<div style="text-align:center;">
				<div class="name">
					{{username}}
				</div>
				<div class="score">
					<img src="@/assets/image/start1.png" class="start1" alt="start"> {{learnUserExamForm.examScore}}分
					<img src="@/assets/image/start2.png" class="start2" alt="start">
				</div>
				<div class="remark">感谢您的作答!</div>
				<div class="percentage">
					<span>{{passingRate}}%</span>正确率
				</div>
				<div class="btn">
					<el-button @click="reviewUserExam">查看试卷</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { listLearnUserExam, saveLearnUserExam } from "@/api/business/learnUserExam";
	import { listLearnExam, getLearnExam } from "@/api/business/learnExam";
	import { listLearnExamQuestion } from "@/api/business/learnExamQuestion";
	import { listLearnUserExamQuestion } from "@/api/business/learnUserExamQuestion";

	import { validatenull } from '@/utils/validate'
	let _this
	export default {
		name: "LearnUserExam",
		components: {},
		data() {
			_this = this
			return {
				loading: true, // 遮罩层
				showSearch: true, // 显示搜索条件
				total: 0, // 总条数
				learnUserExamList: [], // 用户试题表格数据
				title: "", // 弹出层标题
				open: false, // 是否显示弹出层
				queryParams: { // 查询参数
					pageNum: 1,
					pageSize: 10,
					examId: null,
					userId: null,
					examName: null,
					examScore: null,
				},
				learnUserExamForm: {}, // 表单参数
				rules: { // 表单校验
				},
				learnExamOptions: [],
				learnExamQuestionList: [],
				learnUserExamQuestionList: [],
				navtitle: '',
				username: this.$store.getters.name,
				isTest: true,
				radio: 3,
				checkList: [],
				achievementVisible: false,
				radioLength: 0,
				checkListLength: 0,
				radioScore: 0,
				checkListScore: 0,
				arr: [],
				learnExamData: {},
				opt: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
				passingRate: 0,
				showLearnUserExam: false,
			};
		},
		created() {
			listLearnExam({ // 查询参数
				pageNum: 1,
				pageSize: 1000,
				isEnabled: 0,
			}).then(response => {
				this.learnExamOptions = response.rows;
			});
			this.getList();
		},
		methods: {
			getList() { /** 查询用户试题列表 */
				this.loading = true;
				listLearnUserExam(this.queryParams).then(response => {
					this.learnUserExamList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			cancel() { // 取消按钮
				this.open = false;
				this.reset();
			},
			reset() { // 表单重置
				this.learnUserExamForm = {
					id: null,
					examId: null,
					userId: null,
					examName: null,
					examScore: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					delFlag: null
				};
				this.isTest = true
			},
			handleQuery() { /** 搜索按钮操作 */
				this.queryParams.pageNum = 1;
				this.getList();
			},
			resetQuery() { /** 重置按钮操作 */
				this.resetForm("queryForm");
				this.handleQuery();
			},
			submitForm() { /** 提交按钮 */
				this.$refs["form"].validate(valid => {
					if(valid) {
						if(this.form.id != null) {
							updateLearnUserExam(this.form).then(response => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addLearnUserExam(this.form).then(response => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('business/learnUserExam/export', {
					...this.queryParams
				}, `用户试题.xlsx`)
			},
			openUserExam() {
				this.reset()
				this.open = true
			},
			async setUserExam(data) {
				this.learnUserExamForm.userId = this.$store.state.user.userId
				if(!validatenull(data)) {
					this.learnUserExamForm.userId = data.createBy
					this.learnUserExamForm.examId = data.examId
					this.learnUserExamForm.examScore = data.examScore
					this.learnUserExamForm.id = data.id
					this.isTest = false
					this.getLearnUserExamQuestionList()
				}
				this.learnUserExamForm.examName = this.getOptionsLabel(this.learnExamOptions, this.learnUserExamForm.examId, 'id', 'examName')
				this.open = false
				await this.getLearnExam()
				await this.getLearnExamQuestionList()
				this.setLearnExamQuestionList()
			},
			async getLearnExam() {
				this.learnExamData = {}
				let res = await getLearnExam(this.learnUserExamForm.examId)
				this.learnExamData = res.data;
				this.learnUserExamForm.passScore = this.learnExamData.passScore
				this.learnUserExamForm.totalScore = this.learnExamData.totalScore
			},
			async getLearnExamQuestionList() {
				this.learnExamQuestionList = []
				let res = await listLearnExamQuestion({ // 查询参数
					pageNum: 1,
					pageSize: 1000,
					examId: this.learnUserExamForm.examId,
				})
				this.learnExamQuestionList = res.rows;
			},
			async getLearnUserExamQuestionList() {
				this.learnUserExamQuestionList = []
				let res = await listLearnUserExamQuestion({ // 查询参数
					pageNum: 1,
					pageSize: 1000,
					userExamId: this.learnUserExamForm.id,
				})
				this.learnUserExamQuestionList = res.rows;
			},
			setLearnExamQuestionList() {
				this.showLearnUserExam = false
				for(var i = 0; i < this.learnExamQuestionList.length; i++) {
					this.learnExamQuestionList[i].questionOptions = []
					this.learnExamQuestionList[i].updateDate = this.formatDate(this.learnExamQuestionList[i].updateDate, 'yyyy-MM-dd HH:mm:ss');
					//处理选项
					var qos = this.learnExamQuestionList[i].questionOption;
					if(i == 0) {
						this.learnExamQuestionList[i].show = true;
					} else {
						this.learnExamQuestionList[i].show = false;
					}
					var qOptions = [];
					let checkList = []
					if(!validatenull(this.learnUserExamQuestionList)) {
						for(let lueq of this.learnUserExamQuestionList) {
							if(lueq.examQuestionId == this.learnExamQuestionList[i].id) {
								if(this.learnExamQuestionList[i].questionType == '单选题') {
									this.learnExamQuestionList[i].radio = lueq.userAnswer
									this.learnExamQuestionList[i].iscorrect = lueq.userAnswer == this.learnExamQuestionList[i].answer
								} else {
									for(let y = 0; y < lueq.userAnswer.length; y++) {
										checkList.push(lueq.userAnswer.substr(y, 1))
									}
									checkList = checkList
									this.learnExamQuestionList[i].iscorrect = lueq.userAnswer == this.learnExamQuestionList[i].answer
									this.learnExamQuestionList[i].check = true
								}
								break;
							}
						}
					}
					for(var k = 0; k < this.opt.length; k++) {
						if(qos.indexOf(this.opt[k]) != -1) {
							var start = qos.indexOf(this.opt[k]);
							var end = qos.indexOf(this.opt[k + 1]) != -1 ? qos.indexOf(this.opt[k + 1]) : qos.length;
							var qsTemp = qos.substring(start, end);
							var obj = {};
							obj.answer = this.opt[k];
							obj.index = '';
							obj.option = qsTemp;
							obj.checkList = checkList
							this.learnExamQuestionList[i].questionOptions.push(obj);
						}
					}
					if(this.learnExamQuestionList[i].questionType == '单选题') {
						this.radioLength += 1;
						this.radioScore += this.learnExamQuestionList[i].questionScore;
					} else {
						this.checkListLength += 1;
						this.checkListScore += this.learnExamQuestionList[i].questionScore;
					}
				}
				this.showLearnUserExam = true
			},
			selectAnswer(index) {
				if(this.learnExamQuestionList[index].questionType == '多选题') {
					//判断是否选中
					var flag = false;
					for(var i = 0; i < this.learnExamQuestionList[index].questionOptions.length; i++) {
						if('undefined' != this.learnExamQuestionList[index].questionOptions[i].checkList && this.learnExamQuestionList[index].questionOptions[i].checkList) {
							flag = true;
							break;
						}
					}
					if(flag) {
						this.learnExamQuestionList[index].check = true;
					} else {
						this.learnExamQuestionList[index].check = false;
					}
					this.learnExamQuestionList = JSON.parse(JSON.stringify(this.learnExamQuestionList)); //转换值，不然会导致值修改，但不渲染
				}
			},
			submitUserExam() {
				this.$confirm('是否提交试卷?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.saveLearnUserExam();
				}).catch(() => {});
			},
			saveLearnUserExam() {
				if(!this.verificationQuestion()) {
					this.msgError("请做完所有试题，进行提交！")
					return;
				}
				this.learnUserExamForm.learnUserExamQuestionList = this.learnExamQuestionList;
				saveLearnUserExam(this.learnUserExamForm).then(response => {
					console.log(response);
					if(response.code == 200) {
						this.achievementVisible = true
					} else {
						this.$message.error("提交失败,请重新提交！")
						return;
					}
				})
			},
			verificationQuestion() {
				var tempScore = 0; //保存本次考试分数
				var tempAnswerSum = 0;
				//判断所有试题是否已做完
				for(var i = 0; i < this.learnExamQuestionList.length; i++) {
					var tempAnswer = ''; //保存本次答案
					this.learnExamQuestionList[i].examQuestionId = this.learnExamQuestionList[i].id
					if(this.learnExamQuestionList[i].questionType == '单选题') {
						if(validatenull(this.learnExamQuestionList[i].radio)) {
							return false;
						} else {
							this.learnExamQuestionList[i].userAnswer = this.learnExamQuestionList[i].radio;
							this.learnExamQuestionList[i].iscorrect = false; //答题是否正确
							if(this.learnExamQuestionList[i].userAnswer == this.learnExamQuestionList[i].answer) {
								this.learnExamQuestionList[i].iscorrect = true;
								tempScore += this.learnExamQuestionList[i].questionScore;
								tempAnswerSum += 1;
							}
						}
					} else {
						if(!this.learnExamQuestionList[i].check) {
							return false;
						} else {
							for(var j = 0; j < this.learnExamQuestionList[i].questionOptions.length; j++) {
								let checkList = this.learnExamQuestionList[i].questionOptions[j].checkList
								if(!validatenull(checkList)) {
									tempAnswer += checkList[0]; //保存当次答案
								}
							}
							this.learnExamQuestionList[i].iscorrect = false; //答题是否正确
							this.learnExamQuestionList[i].userAnswer = this.strSort(tempAnswer);
							console.log(tempAnswer + "------------" + this.learnExamQuestionList[i].userAnswer)
							if(this.learnExamQuestionList[i].userAnswer == this.learnExamQuestionList[i].answer) {
								this.learnExamQuestionList[i].iscorrect = true;
								tempScore += this.learnExamQuestionList[i].questionScore;
								tempAnswerSum += 1;
							}
						}
					}
				}
				this.passingRate = (tempAnswerSum / this.learnExamQuestionList.length * 100).toFixed(2);
				this.learnUserExamForm.examScore = tempScore;
				return true;
			},
			reviewUserExam() {
				this.arr = []
				for(var i = 0; i < 5; i++) {
					this.arr.push({
						show: true
					})
				}
				this.achievementVisible = false
				this.isTest = false
				this.showLearnUserExam = true
			},
			exitUserExam() {
				this.$confirm('退出考试窗口,是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.reset();
					this.getList();
					this.showLearnUserExam = false
				}).catch(() => {});
			},
			async showUserExam(data) {
				this.learnUserExamForm.userId = this.$store.state.user.userId

				this.learnUserExamForm.examName = this.getOptionsLabel(this.learnExamOptions, this.learnUserExamForm.examId, 'id', 'examName')
				this.open = false
				await this.getLearnExam()
				await this.getLearnExamQuestionList()
				this.setLearnExamQuestionList()
				/*this.learnUserExamForm.userId = data.createBy
				this.learnUserExamForm.examId = data.examId
				this.learnUserExamForm.examScore = data.examScore
				this.learnUserExamForm.userExamId = data.userExamId
				this.learnUserExamForm.examName = this.getOptionsLabel(this.learnExamOptions, this.learnUserExamForm.examId, 'id', 'examName')
				this.open = false
				await this.getLearnExam()
				await this.getLearnExamQuestionList()
				await this.getLearnUserExamQuestionList()
				this.setLearnExamQuestionList()*/
			},
		}
	};
</script>
<style lang="scss">
	/*.sidebar-container {
		display: none;
	}*/
	
	.desktop-setting {
		padding: 0!important;
	}
	
	.main-margin-left {
		margin-left: 0!important;
	}
	
	.question {
		.option label {
			display: flex;
			white-space: normal;
			margin-top: 20px;
		}
	}
	
	.success-tips {
		.el-dialog__body {
			padding-top: 10px;
		}
	}
	
	.dialog-answer-card {
		.el-dialog__body {
			padding-top: 10px;
			overflow-y: auto;
			height: 70vh;
		}
	}
</style>
<style lang="scss" scoped>
	$ratio:16;
	/*.exam-container {
		background: #f2f2f2;
	}*/
	
	.exam-header {
		background: #ffffff;
		height: 70px;
		color: #4A4A4A;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}
	
	.exam-page-name {
		font-size: 24px;
		margin-left: 50px;
	}
	
	.exam-type,
	.exam-name {
		font-size: 20px;
		margin-left: 50px;
		padding-top: 5px;
	}
	/*.exam-content {
		margin-top: 25px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		min-height: calc(100vh - 25px);
		// overflow-y: auto;
	}*/
	
	.answer-card {
		position: fixed;
		background: #ffffff;
		width: 250px;
		/*margin-left: 80px;*/
		min-height: 540px;
		color: #4A4A4A;
		box-shadow: 0px 0px 5px #D7D7D7;
		padding-bottom: 50px;
		top: 95px;
		.answer-body {
			padding: 0 18px;
			// overflow-y: auto;
			height: calc(100vh - 169px);
		}
		.title {
			padding: 15px 0;
			font-size: 18px;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			.sign {
				border-left: 5px solid #02A7F0;
				height: 20px;
				margin-right: 10px;
			}
		}
		.item {
			border-bottom: 1px solid #DCDFE6;
			margin-bottom: 20px;
			.item-type {
				font-weight: bold;
				font-size: 14px;
				margin: 15px 0;
			}
			.item-num {
				padding-bottom: 5px;
				margin-left: -7px;
				span {
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 15px;
					display: inline-block;
					text-align: center;
					color: #D7D7D7;
					background: #ffffff;
					border: 1px solid #D7D7D7;
					margin: 0 7px;
					margin-bottom: 10px;
					font-size: 14px;
				}
				.active {
					color: #ffffff;
					background: #02A7F0;
					border: 1px solid #02A7F0;
				}
				.is-error {
					color: #ffffff;
					background: #f56c6c;
					border: 1px solid #f56c6c;
				}
			}
		}
		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #ffffff;
			z-index: 99;
		}
		.footer-body {
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 46px;
			box-shadow: 0px 0px 5px #D7D7D7;
			.tips {
				flex: 1;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.circle {
		width: 14px;
		height: 14px;
		line-height: 14px;
		border-radius: 7px;
		display: inline-block;
		margin-right: 5px;
	}
	
	.empty {
		border: 1px solid #D7D7D7;
		background: #ffffff;
	}
	
	.blue {
		background: #02A7F0;
	}
	
	.font-bule {
		color: #02A7F0;
	}
	
	.danger {
		background: #f56c6c!important;
	}
	
	.answer-icon {
		float: right;
		border-radius: 5px;
		display: inline-block;
		width: 50px;
		text-align: center;
		color: #ffffff;
	}
	
	.question {
		border: 1px solid #D7D7D7;
		height: 835px;
		color: #4A4A4A;
		flex: 1;
		margin-left: 260px;
		margin-right: 165px;
		background: #ffffff;
		margin-top: -10px;
		overflow-x: auto
	}
	
	.question-total {
		height: 60px;
		line-height: 60px;
		font-size: 20px;
		border-bottom: 1px solid #D7D7D7;
		background: #F8F8F8;
		padding-left: 20px;
		margin-bottom: 20px;
	}
	
	.question-item {
		background: #ffffff;
		padding: 20px;
		.title {
			font-size: 16px;
			.num {
				color: #02A7F0;
			}
		}
		.option {
			display: flex;
			flex-direction: column;
		}
		.right-answer {
			background: #F8F8F8;
			padding: 12px 15px;
			margin-top: 15px;
			font-size: 14px;
			.tips-row {
				line-height: 2;
			}
		}
		.item-line {
			margin-top: 20px;
			border-bottom: 1px solid #DCDFE6;
		}
	}
	
	.right-content {
		position: fixed;
		right: 12px;
		margin: 0 20px;
		width: 120px;
		font-size: 14px;
		top: 95px;
		// height: calc(100vh - 169px);
		.achievement {
			height: 235px;
			box-shadow: 0px 0px 5px #D7D7D7;
			padding: 15px;
			background: #ffffff;
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: center;
				li {
					padding: 15px 0 10px 0;
					border-bottom: 1px solid #DCDFE6;
					.label {
						color: #4A4A4A;
						margin-bottom: 5px;
					}
					.value {
						color: #02A7F0;
					}
					.value-num {
						font-size: 16px;
						color: #02A7F0;
					}
				}
			}
		}
		.operation {
			position: fixed;
			bottom: 70px;
			width: 120px;
			.operation-btn {
				width: 100%;
			}
		}
	}
	
	.sub-tips {
		color: #4A4A4A;
		.sub-tips-content {
			font-size: 24px;
			margin-bottom: 30px;
		}
	}
	
	.success-tips {
		color: #4A4A4A;
		.name {
			font-size: 24px;
			padding-bottom: 15px;
			font-weight: bold;
		}
		.score {
			font-size: 32px;
			color: #02A7F0;
			padding-bottom: 15px;
			.start1 {
				position: relative;
				top: 10px;
				left: -10px;
			}
			.start2 {
				position: relative;
				top: -15px;
				right: -10px;
			}
		}
		.remark {
			font-size: 14px;
			padding-bottom: 10px;
		}
		.percentage {
			font-size: 14px;
			padding-bottom: 30px;
			span {
				color: #02A7F0;
				margin-right: 12px;
			}
		}
	}
	
	.dialog-answer-card {
		background: #ffffff;
		width: 85%;
		color: #4A4A4A;
		box-shadow: 0px 0px 5/$ratio*1em #D7D7D7;
		padding-bottom: 50/$ratio*1em;
		.item {
			border-bottom: 1px solid #DCDFE6;
			margin-bottom: 20/$ratio*1em;
			.item-type {
				font-weight: bold;
				font-size: 14/$ratio*1em;
				margin: 15/$ratio*1em 0;
			}
			.item-num {
				padding-bottom: 5/$ratio*1em;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				// justify-content: space-between;
				span {
					width: 56/$ratio*1em;
					height: 56/$ratio*1em;
					line-height: 56/$ratio*1em;
					border-radius: 28/$ratio*1em;
					display: inline-block;
					text-align: center;
					color: #D7D7D7;
					background: #ffffff;
					border: 1px solid #D7D7D7;
					margin: 0 calc((90vw - 20em)/12);
					margin-bottom: 10/$ratio*1em;
					font-size: 14/$ratio*1em;
				}
				.active {
					color: #ffffff;
					background: #02A7F0;
					border: 1px solid #02A7F0;
				}
				.is-error {
					color: #ffffff;
					background: #f56c6c;
					border: 1px solid #f56c6c;
				}
			}
		}
	}
	
	.primary {
		color: #409EFF;
	}
	
	.unpass {
		color: #f56c6c;
	}
</style>